<template>
  <Row v-bind="rowAttrs">
    <sh-description-col v-for="(item, index) in getColList" :key="index" :item="item">
      <template #[item.itemSlot]>
        <slot :name="item.itemSlot" :item="item" />
      </template>
      <template #[item.labelSlot]>
        <slot :name="item.labelSlot" :item="item" />
      </template>
      <template #[item.valueSlot]>
        <slot :name="item.valueSlot" :item="item" />
      </template>
    </sh-description-col>
  </Row>
</template>

<script setup>
import ShDescriptionCol from './description-col.vue';
import { useComputed } from './utils/useComputed';

const props = defineProps({
  gutter: {
    type: Number,
    default: 20,
  },
  itemList: {
    type: Array,
    default: () => {
      return [];
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const { rowAttrs, getColList } = useComputed(props);
</script>
